<template>
  <div id="businessGroupPage">
    <div style="padding: 15px;text-align: left;">
      <el-button type="primary" @click="changeState">添加商户组</el-button>
      <el-button type="primary">
        <router-link to="/merchantMange/addMerchant">返回通道管理</router-link>
      </el-button>
      <span style="margin-left: 40px; color: red;font-weight: bold;">通道名：</span>
      <el-input style="width: 120px;" readonly v-model="channleName"></el-input>
      <el-dialog title="保存商户组" :visible.sync="dialogFormVisible" size="small">
        <el-form :data="businessGroupInfo" ref="businessGroupInfo">
          <el-form-item label="商户组名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="businessGroupInfo.name" auto-complete="off"></el-input>
          </el-form-item>
          <div class="flex">
            <el-form-item label="支付宝扫码" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowAliCode" label="1">是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowAliCode" label="0">否</el-radio>

            </el-form-item>
            <el-form-item label="支付宝wap" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowAliWap" label="1" checked>是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowAliWap" label="0">否</el-radio>

            </el-form-item>

          </div>
          <div class="flex">

            <el-form-item label="QQ扫码" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowQq" label="1" checked>是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowQq" label="0">否</el-radio>

            </el-form-item>
            <el-form-item label="QQwap" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowQqWap" label="1" checked>是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowQqWap" label="0">否</el-radio>

            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="微信扫码" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowWxCode" label="1" checked>是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowWxCode" label="0">否</el-radio>

            </el-form-item>
            <el-form-item label="微信H5" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowWxH5" label="1" checked>是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowWxH5" label="0">否</el-radio>

            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="京东支付" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowJd" label="1" checked>是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowJd" label="0">否</el-radio>

            </el-form-item>
            <el-form-item label="网银快捷" :label-width="formLabelWidth">
              <el-radio class="radio" v-model="businessGroupInfo.allowQuickBank" label="1">是</el-radio>
              <el-radio class="radio" v-model="businessGroupInfo.allowQuickBank" label="0">否</el-radio>

            </el-form-item>
          </div>
          <el-form-item label="银联扫码" :label-width="formLabelWidth">
            <el-radio class="radio" v-model="businessGroupInfo.allowCodeBank" label="1">是</el-radio>
            <el-radio class="radio" v-model="businessGroupInfo.allowCodeBank" label="0">否</el-radio>

          </el-form-item>
          <div class="flex">
            <el-form-item label="结算类型T0(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.t0" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="结算类型T1(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.t1" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="结算类型D0(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.d0" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="结算类型D1(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.d1" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="延迟时间(h)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.lazyTime" auto-complete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="结算时间(h)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.settlementTime" auto-complete="off" type="number" max="23"
                        placeholder="请输入0-23中间的数字"></el-input>
            </el-form-item>
          </div>


          <div class="flex">
            <el-form-item label="固定提现费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.cashFixed" auto-complete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="最小提现费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.minCashFee" auto-complete="off" type="number"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="最小提现金额" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.minCashMoney" auto-complete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="百分比提现费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.cashPercent" auto-complete="off" type="number"></el-input>
            </el-form-item>
          </div>


          <div class="flex">
            <el-form-item label="支付宝扫码费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffAliCode" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="支付宝wap费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffAliWap" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="京东费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffJd" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="QQ扫码费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffQq" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="微信扫码费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffWxCode" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="微信H5费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffWxH5" auto-complete="off"></el-input>
            </el-form-item>
          </div>

          <div class="flex">
            <el-form-item label="网银快捷费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffQuickBank" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="QQwap费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffQqWap" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="银联扫码费率(%)" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.tariffCodeBank" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="backup5" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.backup5" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="flex">

            <el-form-item label="backup1" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.backup1" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="backup2" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.backup2" auto-complete="off"></el-input>
            </el-form-item>
          </div>
          <div class="flex">

            <el-form-item label="backup3" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.backup3" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="backup4" :label-width="formLabelWidth">
              <el-input v-model="businessGroupInfo.backup4" auto-complete="off"></el-input>
            </el-form-item>
          </div>

        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addBusinessGroup">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <el-table :data="businessGroupList" border style="width: 100%" v-loading="loading1">
      <el-table-column prop="id" label="ID">
      </el-table-column>
      <el-table-column prop="name" label="商户组名">
      </el-table-column>
      <el-table-column label="商户组开关">
        <template slot-scope="scope">
          <el-button type="primary" size='small' @click="businessGroupStart(scope.row.id)">开启</el-button>
          <el-button type="primary" size="small" @click="businessGroupStop(scope.row.id)">停止</el-button>
        </template>

      </el-table-column>
      <el-table-column label="修改商户组">
        <template slot-scope="scope">
          <el-button type="text" @click="changeState2(scope.row)">修改</el-button>
        </template>

      </el-table-column>
      <el-table-column label="商户管理">
        <template slot-scope="scope">

          <el-button type="text" @click="bussiness(scope.row.id,scope.row.name)">商户管理</el-button>

        </template>

      </el-table-column>

    </el-table>
    <div class="block" style="text-align: right;padding-top: 15px;">

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"
                     layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dialogFormVisible: false,
        dialogFormVisible2: false,
        businessGroupList: [],
        loading1: false,
        formLabelWidth: '120px',
        businessGroupName: '',
        channleName: '',
        pageSize: 10,
        pageNumber: 1,
        total: 1,
        businessGroupInfo: {
          channelId: '',
          name: '',
          settlementTime: '0',
          lazyTime: '0',
          allowAliWap: '',
          tariffAliWap: '',
          allowAliCode: '',
          tariffAliCode: '',
          allowWxH5: '',
          tariffWxH5: '',
          allowWxCode: '',
          tariffWxCode: '',
          allowQuickBank: '',
          tariffQuickBank: '',
          allowCodeBank: '',
          tariffCodeBank: '',
          allowQq: '',
          allowQqWap:'',
          tariffQq: '',
          tariffQqWap:'',
          allowJd: '',
          tariffJd: '',
          minCashFee: '',
          cashPercent: '',
          cashFixed: '',
          backup1: '',
          backup2: '',
          backup3: '',
          backup4: '',
          backup5: '',
          t0: '',
          t1: '',
          d0: '',
          d1: '',
          minCashMoney: ''

        },
      }
    },

    created() {
      this.businessGroupInfo.channelId = this.$route.query.channleId;
      this.channleName = this.$route.query.channleName;
      this.getBusinessGroupList();
    },
    methods: {
      getBusinessGroupList() {
        this.loading1 = true;
        let _this = this;
        this.$api.getBusinessGroupList(this.$route.query.channleId).then(res => {
          if (res.code == '000000') {
            _this.loading1 = false;
            _this.businessGroupList = res.data;
            _this.total = res.data.length;
            console.log(res.data)
          }
        })
      },
      changeState() {
        sessionStorage.setItem("group id", '');
        this.dialogFormVisible = true;
        this.clearParams(this.businessGroupInfo);
        for (let item in this.businessGroupInfo) {
          if (item == 'allowAliWap' || item == 'allowAliCode' || item == 'allowJd' || item == 'allowWxH5' ||
            item == 'allowWxCode' || item == 'allowQuickBank' || item == 'allowQq' || item == 'allowQqWap'
              || item == 'allowCodekBank') {
            this.businessGroupInfo[item] = '0';
          }
        }
        this.businessGroupInfo.channelId = this.$route.query.channleId
      },
      addBusinessGroup() {
       let id = sessionStorage.getItem('group id')
        if(id){
          this.businessGroupInfo.id = id
        }else{
          if(this.businessGroupInfo.id){
            delete this.businessGroupInfo[id]
          }
        }
        let _this = this;
        // _this.$refs['businessGroupInfo'].resetFields();
        this.$api.saveBusinessGroup(this.businessGroupInfo).then(res => {
          if (res.code == '000000') {
            console.log(res.data);
            _this.dialogFormVisible = false;
            _this.$message({
              type: 'success',
              message: "保存商户组成功"
            });
            _this.getBusinessGroupList();
          }
        })

      },
      changeState2(row) {
        this.dialogFormVisible = true;
        for (let i in row) {
          for (let j in this.businessGroupInfo) {
            if (i == j) {
              this.businessGroupInfo[j] = row[i] + '';
            }
          }
        }
        sessionStorage.setItem("group id", row.id);

      },
      businessGroupStart(id) {
        let _this = this;
        this.$api.getBusinessGroupStart(id).then(res => {
          if (res.code == '000000') {
            _this.$message({
              type: 'success',
              message: "商户组开启成功"
            });
          }
        })
      },
      businessGroupStop(id) {
        let _this = this;
        this.$api.getBusinessGroupStop(id).then(res => {
          if (res.code == '000000') {
            _this.$message({
              type: 'success',
              message: "商户组停止成功"

            });
          }
        })
      },
      bussiness(id, name) {
        this.$router.push({
          path: '/merchantMange/addBusiness',
          query: {
            groupId: id,
            groupName: name
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNumber = val;
        this.getBusinessGroupList()
      },
      clearParams(obj) {
        for (let item in obj) {
          obj[item] = ''
        }
      }

    }
  }
</script>

<style lang="less">
  #businessGroupPage {
    .cell {
      text-align: center;
    }
    .flex {
      display: flex;
      justify-content: flex-start;
    }
  }
</style>
